﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuding的盒模型演示</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/fixed_L.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body { font-size:.8125em; font-family:Consolas, Helvetica, sans-serif; }
.fixed .nm .ming { width:700px; }
.fixed .nm .ning { width:150px; }
h3 { background:none; margin:0px; padding:0px; color:#333; font-family:Consolas, Helvetica, sans-serif; }
div { margin:6px; padding:6px; border: 2px solid #C00; font-weight:normal; }
.ding { border: 2px dashed #000; }
#bhead, #bbody, #bfoot { margin-top: 20px; margin-bottom: 20px; width: 1000px; border: 8px dashed #CCC; }
.wrapping { border: 4px dashed #000; padding:4px; }
.filling { border: 4px dashed #060; margin:4px; }
.title, .gnb, .lnb, .search { border: 3px solid #606; }
.ming, .ning { border:4px solid #606; }
</style>
</head>

<body class="fixed">
<div id="bhead">
  <h3>#bhead</h3>
  <div id="bh1st" class="wrapping">
    <h3>#bh1st .wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="title">.title</div>
      <div class="gnb">.gnb</div>
      <div class="lnb">.lnb</div>
      <div class="search">.search</div>
    </div>
  </div>
  <div id="bh9th" class="wrapping">
    <h3>#bh9th .wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="ming">
        <div>此处显示新 Div 标签的内容</div>
      </div>
    </div>
  </div>
</div>
<!-- ######### ######### ######### BEGIN::bbody  ######### ######### ######### -->
<div id="bbody">
  <h3>#bbody</h3>
  <div id="bb1st" class="wrapping m">
    <h3>#bb1st .wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="ming">
        <div>此处显示新 Div 标签的内容</div>
      </div>
    </div>
  </div>
  <div id="bb5th" class="wrapping nm">
    <h3>#bb5th wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="ming">
        <h3>.ming</h3>
        <div class="ding xfl">
          <h3>.ding .xfl</h3>
          <div>此处显示新 Div 标签的内容；此处显示新 Div 标签的内容；</div>
          <div>此处显示新 Div 标签的内容；此处显示新 Div 标签的内容；</div>
          <div>此处显示新 Div 标签的内容；此处显示新 Div 标签的内容；</div>
        </div>
        <div class="ding xfr">
          <h3>.ding .xfr</h3>
          <div>此处显示新 Div 标签的内容；</div>
          <div>此处显示新 Div 标签的内容；</div>
          <div>此处显示新 Div 标签的内容；</div>
        </div>
      </div>
      <div class="ning n1">
        <h3>.ning</h3>
        <div>此处显示新 Div 标签的内容</div>
        <div>此处显示新 Div 标签的内容</div>
        <div>此处显示新 Div 标签的内容</div>
        <div>此处显示新 Div 标签的内容</div>
      </div>
    </div>
  </div>
  <div id="bb9th" class="wrapping m">
    <h3>#bb9th .wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="ming">
        <div class="ding xfl">
          <h3>.ding .xfl</h3>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
        </div>
        <div class="ding xfl">
          <h3>.ding .xfl</h3>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
        </div>
        <div class="ding xfl">
          <h3>.ding .xfl</h3>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
        </div>
        <div class="ding xfl">
          <h3>.ding .xfl</h3>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
          <div>此处显示新 Div 标签的内容</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ######### ######### ######### END::bbody ######### ######### ######### -->
<div id="bfoot">
  <h3>#bfoot</h3>
  <div id="bf1st" class="wrapping m">
    <h3>#bf1st .wrapping</h3>
    <div class="filling">
      <h3>.filling</h3>
      <div class="ming">
        <div>此处显示新 Div 标签的内容</div>
      </div>
    </div>
  </div>
  <div id="bf9th" class="wrapping nm">
    <h3>#bf9th .wrapping</h3>
    <div class="filling">
      <div class="ming">
        <h3>.ming</h3>
        <div>此处显示新 Div 标签的内容</div>
      </div>
      <div class="ning n1">
        <h3>.ning</h3>
        <div>此处显示新 Div 标签的内容</div>
      </div>
    </div>
  </div>
</div>
<hr />
<div id="colophon" style="border:0;">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> <span>All Rights Reserved.</span>
  </address>
</div>
</body>
</html>
